<template>
    <div class="content-wrapper">
        <el-row class="content-row">
            <el-col class="height-init" :span="24">
                <div class="container">
                    <el-row class="handle-box">
                        
                        <el-date-picker
                            @change="showDateChange"
                            :editable="false"
                            placeholder="播出时间"
                            class="mr10"
                            v-model="query.querytime"
                            type="date">
                        </el-date-picker>

                        <el-input v-model="query.menuName" class="handle-input mr10" placeholder="栏目名称"/>
                        <el-input v-model="query.topic" class="handle-input mr10" placeholder="节目主题"/>
                        
                        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                        <el-button type="primary" icon="el-icon-setting" @click="resetQueryForm">重置</el-button>
                                               
                        <el-button type="primary" icon="el-icon-setting" @click="copyYesterday">复制昨天节目清单</el-button>

                    </el-row>
                    <el-row class="list-table-row">
                        <el-table
                            :data="tableData"
                            border
                            class="table"
                            ref="multipleTable"
                            height="100%"
                            header-cell-class-name="table-header"
                            @selection-change="handleSelectionChange"
                        >
                            <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
                            <el-table-column type="index" width="50" align="center"></el-table-column>
                            <el-table-column prop="menuBeginTime" width="100"  label="开始时间" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="menuEndTime" width="100"  label="结束时间" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="menuName" width="200"  label="栏目名称" show-overflow-tooltip>
                                <template slot-scope="scope" >
                                    《{{scope.row.menuName}}》
                                </template>
                            </el-table-column>
                            <el-table-column prop="showDate" width="120"  label="播放时间" show-overflow-tooltip>
                                <template slot-scope="scope" >
                                    {{renderTimeNoTime(scope.row.showDate)}}
                                </template>
                            </el-table-column>

                            <!-- <el-table-column prop="showDate" width="120"  label="播放开始时间" show-overflow-tooltip>
                                <template slot-scope="scope" >
                                    {{renderTime(scope.row.showBeginTime)}}
                                </template>
                            </el-table-column>

                            <el-table-column prop="showDate" width="120"  label="播放结束时间" show-overflow-tooltip>
                                <template slot-scope="scope" >
                                    {{renderTime(scope.row.showEndTime)}}
                                </template>
                            </el-table-column> -->

                            <el-table-column prop="showTopic" label="今日节目主题" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="listenInNum" width="100"  label="收听人数" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="status" width="300"  label="节目状态" show-overflow-tooltip>
                                <template slot-scope="scope" >
                                    <div>{{status[scope.row.status]}}</div>
                                    <AudioVue v-if="scope.row.status === 3" :theUrl="scope.row.replayUrl" />
                                </template>
                            </el-table-column>

                            <el-table-column label="节目操作" width="240" align="center" >
                                <template slot-scope="scope">
                                    <div v-if="scope.row.id">
                                        <el-button type="text" icon="el-icon-edit" @click="openEditDialog(scope.row)" >编辑</el-button>
                                        <el-button type="text" icon="el-icon-delete" @click="remove(scope.row)" >删除</el-button>
                                    </div>
                                    <div v-else>
                                        <el-button type="text" icon="el-icon-plus" @click="openAddDialog(scope.row)" >新增节目主题</el-button>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-row>
                    <!-- <el-row class="pagination-self">
                        <el-pagination
                            background
                            layout="total, sizes, prev, pager, next"
                            :current-page="query.pageNo"
                            :page-size="query.pageSize"
                            :total="pageTotal"
                            @size-change="handleSizeChange"
                            @current-change="handlePageChange"
                        ></el-pagination>
                    </el-row> -->
                </div>
            </el-col>
        </el-row>

       <el-dialog
            title='新增节目主题'
            width='40%'
            :visible.sync="addDialogVisible"
            :before-close="handleClose"
            :close-on-click-modal="false"
            append-to-body>
            <MediaNewAdd v-if="addDialogVisible" :mediaNew="curRow"  @handleClose='handleClose' @saveClose="saveClose" />
        </el-dialog >
        
        <el-dialog
            title='修改节目主题'
            width='40%'
            :visible.sync="editDialogVisible"
            :before-close="handleEditClose"
            :close-on-click-modal="false"
            append-to-body>
            <MediaNewEdit v-if="editDialogVisible" :mediaNew="curRow"  @handleClose='handleEditClose' @saveClose="saveEditClose" />
        </el-dialog >

    </div>

</template>

<script>
import { getCityTree } from '../../../api/city'
import {fetchPageList,deleteNewList,updateNewList,copyNewList} from '../../../api/media/newList'
import MediaNewAdd from './MediaNewAdd'
import MediaNewEdit from './MediaNewEdit'

import AudioVue from '../../../common/Audio'

// import SubjectEdit from './SubjectEdit'

export default {
    name: 'mediaNewList',
    data() {
        return {
            curRow:{},
            positions: {},
            status: {},
            addDialogVisible:false,
            editDialogVisible:false,
            query: {
                pageNo: 1,
                pageSize: 30,
                menuName: '',
                topic: '',
                querytime: ''
            },
            tableData: [],
            multipleSelection: [],
            pageTotal: 0,
            spaces:[],
            treeData: [],
            defaultProps: {
                children: 'children',
                label: 'name',
                isLeaf: 'leaf'
            }
        };
    },

    activated(){
        this.pageInit();
    },
    created() {
        this.pageInit();
    },
    methods: {
        copyYesterday(){
            let that = this;
            let showDate = that.query.querytime.getTime();
            copyNewList({showDate:showDate}).then(res=>{
                that.fetchTableData();
            })
        },
        showDateChange(val){
            console.log("showDateChange===>",val);
            this.fetchTableData();
        },
        checkTime(row){
            let beginTime = row.beginTime;
            let curTime = new Date().getTime();
            console.log("checkTime==>",beginTime,curTime,curTime < beginTime);
            return curTime < beginTime;
        },
        resetQueryForm(){
            this.query = {
                pageNo: 1,
                pageSize: 30,
                menuName: '',
                topic: '',
                querytime: ''
            }
            this.fetchTableData();
        },
        openEditDialog(row){
            this.curRow = row;
            this.editDialogVisible = !this.editDialogVisible;
        },
        remove(row){
            let that = this;
            that.$confirm('确认删除？')
            .then(_ => {
                deleteNewList({id:row.id}).then(res=>{
                    console.log("remove record ===>",res);
                    that.fetchTableData();
                })
            })
            .catch(_ => {});
        },
        openSubjectPost(row){
            this.addTag('话题帖子列表','/bbs/subject/post/list/'+row.id,'subjectPostList'+row.id)
        },
        pageInit(){
            let todayTime = new Date(new Date().toLocaleDateString()).getTime();
            console.log("todayTime=====>",todayTime)
            this.query.querytime = new Date(todayTime);
            this.enumMap('SubjectEnum.PositionEnum','com.zlll.winner.enums.bbs').then(res=>{if(res) this.positions = res });
            this.enumMap('MediaEnum.StatusEnum','com.zlll.winner.enums.media').then(res=>{if(res) this.status = res});
            this.fetchTreeData();
            this.fetchTableData();
        },
        saveClose(){
            this.addDialogVisible = !this.addDialogVisible;
            this.fetchTableData();
        },
        saveEditClose(){
            this.editDialogVisible = !this.editDialogVisible;
            this.fetchTableData();
        },
        handleClose(done) {
            let that = this
            this.$confirm('确认关闭？')
            .then(_ => {
                that.addDialogVisible = !that.addDialogVisible;
                that.fetchTableData();
            })
            .catch(_ => {});
        },
        handleEditClose(done) {
            let that = this
            this.$confirm('确认关闭？')
            .then(_ => {
                that.editDialogVisible = !that.editDialogVisible;
                that.fetchTableData();
            })
            .catch(_ => {});
        },
        openAddDialog(row){
            this.curRow = row;
            this.addDialogVisible = !this.addDialogVisible
        },
        handleNodeClick(node){
            console.log("handleNodeClick==>node:",node)
            this.query.cityCode = node.code;
            this.fetchTableData();
        },
        fetchTreeData(){
            let that = this;
            getCityTree().then(res=>{
                that.treeData = res.data
            })
        },
        //搜索条件方法
        handleSearch(){
            this.query.pageNo = 1;
            this.fetchTableData();
        },
        // 表格数据查询方法
        fetchTableData(){
            let that = this;
            if(that.query.querytime){
                            console.log("that.query.querytime===>",this.renderTimeNoTime(that.query.querytime.getTime()))

                that.query.showDate = that.query.querytime.getTime();
            }else{
                that.query.showDate = '';
            }
            fetchPageList(that.query).then(res=>{
                if(res.code == '0'){
                    that.tableData = res.data.records;
                    that.pageTotal = res.data.total;
                }
            });
        },
        // 多选操作
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 分页方法
        handlePageChange(val) {
            this.query.pageNo = val;
            this.fetchTableData();
        },
        // 分页大小改变方法
        handleSizeChange(val) {
            this.query.pageSize = val;
            this.fetchTableData();
        },
    },
    components:{MediaNewAdd,AudioVue,MediaNewEdit}
};
</script>

<style scoped>

.content-wrapper{
    height:100%;
    overflow-y: hidden;
}

.content-row{
    height: 100%;
}

.cityTree{
    overflow-y: scroll;
}

.height-init{
    height: 100%;
}

.container{
    height: 100%;
}

.handle-box {
    height: 6.5%;
}

.handle-input {
    width: 120px;
    display: inline-block;
}

.list-table-row{
    height:90%;
}

.table {
    width: 100%;
    height: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.pagination-self{
    height:10%;
    text-align: right;
    margin-top: 5px;
}
</style>
